<template>
  <div class="expert_add">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="12">
          <p class="infoStyle">
            <svg-icon icon-class="base_info" class="svg_icon_style" />
            <span class="svg_icon_span">基本信息</span>
          </p>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专家姓名" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入专家姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="nation">
                <el-input
                  v-model="formData.nation"
                  placeholder="请输入民族"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
                <!-- <el-select
                  v-model="formData.nation"
                  placeholder="请选择民族"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in field115Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="身份标签" prop="identityTag">
                <el-input
                  v-model="formData.identityTag"
                  placeholder="请输入身份标签"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
                <el-select
                  v-model="formData.identityTag"
                  placeholder="请选择身份标签"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in field117Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="出生年月" prop="birthday">
                <el-date-picker
                  v-model="formData.birthday"
                  type="date"
                  placeholder="请选择出生年月"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="formData.gender" size="medium">
                  <el-radio
                    v-for="(item, index) in genderOptions"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="身份证号" prop="idCard">
                <el-input
                  v-model="formData.idCard"
                  placeholder="请输入身份证号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col :span="5">
          <p>
            <svg-icon icon-class="base_info" class="svg_icon_style" />
            <span class="svg_icon_span">其他信息</span>
          </p>
          <el-row type="flex" justify="center" align="middle">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :headers="myHeader"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img
                v-if="formData.headImgUrl"
                :src="formData.headImgUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-row>
        </el-col> -->
        <el-col :span="16">
          <p class="infoStyle">
            <svg-icon icon-class="contact-info" class="svg_icon_style" />
            <span class="svg_icon_span">联系信息</span>
          </p>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input
                  v-model="formData.phone"
                  placeholder="请输入联系电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="formData.email"
                  placeholder="请输入邮箱"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区域">
                <area_cascader
                  :orgId="formData.organId"
                  @getOrginId="changeArea"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12"
              ><el-form-item label="常驻地址">
                <el-input
                  v-model="formData.address"
                  placeholder="请输入常驻地址"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <p class="infoStyle">
            <svg-icon icon-class="major" class="svg_icon_style" />
            <span class="svg_icon_span">专业信息</span>
          </p>
          <el-row>
            <el-col :span="12"
              ><el-form-item label="专业背景" prop="major">
                <el-input
                  v-model="formData.major"
                  placeholder="请输入专业背景"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="graduateSchool">
                <el-input
                  v-model="formData.graduateSchool"
                  placeholder="请输入毕业院校"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
            <el-col :span="12">
              <el-form-item label="所在单位" prop="unitName">
                <el-input
                  v-model="formData.unitName"
                  placeholder="请输入所在单位"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" prop="maxEducation">
                <el-input
                  v-model="formData.maxEducation"
                  placeholder="请输入最高学历"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称" prop="jobTitle">
                <el-input
                  v-model="formData.jobTitle"
                  placeholder="请输入职称"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="研究方向" prop="studyDirection">
                <el-input
                  v-model="formData.studyDirection"
                  placeholder="请输入研究方向"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="作品成果" prop="works">
                <el-input
                  v-model="formData.works"
                  placeholder="请输入作品成果"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <p class="infoStyle">
                <svg-icon icon-class="major" class="svg_icon_style" />
                <span class="svg_icon_span">擅长领域</span>
              </p>
              <el-form-item label-width="20px" required>
                <div>
                  <el-tag
                    :key="tag"
                    v-for="tag in areaExpertiseParams.dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseOne(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="areaExpertiseParams.inputVisible"
                    v-model="areaExpertiseParams.inputValue"
                    ref="saveTagInputOne"
                    size="small"
                    @keyup.enter.native="handleInputConfirmOne"
                    @blur="handleInputConfirmOne"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInputOne"
                    >添加标签</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <p class="infoStyle">
                <svg-icon icon-class="other-label" class="svg_icon_style" />
                <span class="svg_icon_span">其他标签</span>
              </p>
              <el-form-item label-width="20px" prop="tags">
                <div>
                  <el-tag
                    :key="tag"
                    v-for="tag in tagsParams.dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseTwo(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="tagsParams.inputVisible"
                    v-model="tagsParams.inputValue"
                    ref="saveTagInputTwo"
                    size="small"
                    @keyup.enter.native="handleInputConfirmTwo"
                    @blur="handleInputConfirmTwo"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInputTwo"
                    >添加标签</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="20px">
            <span @click="submitForm" class="btn_operate btn_operate_submit"
              >提交</span
            >
            <span @click="cancelForm" class="btn_operate btn_operate_cancel"
              >取消</span
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { addExpertInfo, getExperiseDetail } from "@/api/enterprise/expert";
import { getAccessToken, getTenantId } from "@/utils/auth";
import area_cascader from "../common/area_cascader.vue";
import { uploadFileUrl } from "@/config/env";
export default {
  components: { area_cascader },
  props: [],
  data() {
    return {
      //文件上传相关参数
      action: uploadFileUrl,
      myHeader: {
        Authorization: "Bearer " + getAccessToken(),
        "tenant-id": getTenantId(),
      },
      areaExpertiseParams: {
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
      },
      tagsParams: {
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
      },
      formData: {
        headImgUrl: "",
        name: "",
        nation: "",
        gender: 1,
        identityTag: "",
        idCard: "",
        phone: "",
        email: "",
        birthday: "",
        address: "",
        graduateSchool: "",
        major: "",
        unitName: "",
        maxEducation: "",
        jobTitle: "",
        studyDirection: "",
        works: "",
        areaExpertise: "",
        tags: "",
        organId: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        nation: [],
        gender: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        identityTag: [],
        idCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur",
          },
        ],
        email: [],
        birthday: [
          {
            required: true,
            message: "请选择出生年月",
            trigger: "change",
          },
        ],
        jobTitle: [
          {
            required: true,
            message: "请输入职称",
            trigger: "blur",
          },
        ],
        graduateSchool: [],
        major: [
          {
            required: true,
            message: "请输入专业背景",
            trigger: "blur",
          },
        ],
        unitName: [],
        maxEducation: [],
        studyDirection: [
          {
            required: true,
            message: "请输入研究方向",
            trigger: "blur",
          },
        ],
        works: [],
      },
      genderOptions: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    //获取详情数据
    if (this.$route.query.editId) {
      this.editId = this.$route.query.editId;
      this.getExperiseDetail();
    }
  },
  mounted() {},
  methods: {
    //勾选数据
    changeArea(val) {
      this.formData.organId = val;
    },
    getExperiseDetail() {
      getExperiseDetail(this.editId).then((res) => {
        let { data } = res;
        this.formData = data;
        this.areaExpertiseParams.dynamicTags = data.areaExpertise
          ? data.areaExpertise.split(",")
          : [];
        this.tagsParams.dynamicTags = data.tags ? data.tags.split(",") : [];
        this.formData.organId = this.formData.organList
          ? this.formData.organList.map((item) => item.id)
          : [];
      });
    },
    //图片上传成功
    handleAvatarSuccess(res, file, fileList) {
      this.formData.headImgUrl = res.data;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        if (this.areaExpertiseParams.dynamicTags.length == 0) {
          this.$message.info("擅长领域必填！");
          return;
        }

        this.formData.areaExpertise =
          this.areaExpertiseParams.dynamicTags.join(",");
        this.formData.tags = this.tagsParams.dynamicTags.join(",");
        let params = { ...this.formData };
        params.organId = params.organId
          ? params.organId[params.organId.length - 1]
          : "";
        addExpertInfo(params).then((res) => {
          this.$router.push({
            path: "/roles/expertDatabase",
          });
        });
      });
    },
    cancelForm() {
      this.$refs["elForm"].resetFields();
      this.$router.push({
        path: "/roles/expertDatabase",
      });
    },
    //添加标签相关方法
    handleCloseOne(tag) {
      this.areaExpertiseParams.dynamicTags.splice(
        this.areaExpertiseParams.dynamicTags.indexOf(tag),
        1
      );
    },

    showInputOne() {
      this.areaExpertiseParams.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputOne.$refs.input.focus();
      });
    },

    handleInputConfirmOne() {
      let inputValue = this.areaExpertiseParams.inputValue;
      if (inputValue) {
        this.areaExpertiseParams.dynamicTags.push(inputValue);
      }
      this.areaExpertiseParams.inputVisible = false;
      this.areaExpertiseParams.inputValue = "";
    },
    handleCloseTwo(tag) {
      this.tagsParams.dynamicTags.splice(
        this.tagsParams.dynamicTags.indexOf(tag),
        1
      );
    },

    showInputTwo() {
      this.tagsParams.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputTwo.$refs.input.focus();
      });
    },

    handleInputConfirmTwo() {
      let inputValue = this.tagsParams.inputValue;
      if (inputValue) {
        this.tagsParams.dynamicTags.push(inputValue);
      }
      this.tagsParams.inputVisible = false;
      this.tagsParams.inputValue = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.expert_add {
  margin: 10px 20px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed;
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.infoStyle {
  height: 40px;
}
.svg_icon_style {
  font-size: 24px;
  margin-right: 8px;
}
.svg_icon_span {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #494a4e;
}
::v-deep label {
  font-weight: 200 !important;
}
</style>
<style>
.btn_operate {
  display: inline-block;
  width: 82px;
  height: 34px;
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  margin-top: 30px;
  margin-right: 12px;
  cursor: pointer;
  border: 1px solid #4877ee;
}
.btn_operate_submit {
  background: #4877ee;
  color: #ffffff;
}
.btn_operate_cancel {
  color: #4877ee;
}
</style>
